<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="600px">
		<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
			<el-row :gutter="10" class="mb20">
				<el-col>
					<el-form-item label="标题" prop="title">
						<el-input v-model="form.title" placeholder="请输入标题" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col>
					<el-form-item label="排序" prop="display_order">
						<el-input v-model="form.display_order" placeholder="请输入序号" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20">
				<el-col>
					<el-form-item label="链接类型" prop="link_type">
						<el-radio-group v-model="form.link_type">
							<el-radio :label="0">不跳转</el-radio>
							<el-radio :label="2">链接到商品</el-radio>
							<el-radio :label="3">链接到标签</el-radio>
							<el-radio :label="4">链接到直播</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<!-- <el-row class="mb20" v-if="form.link_type != 0">
				<el-col>
					<el-form-item label="链接目标" prop="link_content">
						<el-input
							v-model="form.link_content"
							placeholder="自定义链接则填写链接，链接类型为自定义链接时这里是链接，类型为链接到商品时这里是商品id"
						/>
					</el-form-item>
				</el-col>
			</el-row> -->
			<el-row v-if="form.link_type === 2" :gutter="20" class="mb20">
				<el-col :span="24">
					<el-form-item label="关联商品" prop="good_id">
						<el-select
							v-model="form.good_id"
							clearable
							placeholder="请输入选择商品"
							filterable
							remote
							:remote-method="goodIdRemoteMethod"
							:loading="goodIdSelect.loading"
							@focus="onGoodIdFocus"
							class="w100"
						>
							<el-option v-for="item in goodIdSelect.options" :key="item.id" :label="item.title" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row v-if="form.link_type === 3" :gutter="20" class="mb20">
				<el-col :span="24">
					<el-form-item label="关联标签" prop="label_id">
						<el-select v-model="form.label_id" clearable placeholder="请输入选择标签" class="w100">
							<el-option v-for="item in labelIdOptions" :key="item.id" :label="item.name" :value="item.id" :disabled="!item.status" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row v-if="form.link_type === 4" :gutter="20" class="mb20">
				<el-col :span="24">
					<el-form-item label="关联直播" prop="live_id">
						<el-select v-model="form.live_id" clearable placeholder="请输入选择直播" class="w100">
							<el-option v-for="item in liveIdOptions" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20">
				<el-col>
					<el-form-item label="状态" prop="status">
						<el-radio-group v-model="form.status">
							<el-radio :label="1">启用</el-radio>
							<el-radio :label="2">禁用</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col>
					<el-form-item label="轮播图" prop="thumb">
						<template #label>
							轮播图<br />
							宽高750*1090<br />
							大小不超过2M
						</template>
						<image-upload-cOS v-model="form.thumb" path="banner/thumb" ref="imageUploadThumbRef" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" :loading="submitLoading" @click="onSubmitForm"> 确 定 </el-button>
				<el-button @click="onCancel">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { nextTick, reactive, ref, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
import { bannerAdd, tagsApi,livesApi } from '/@/api/admin';
import { goodsList } from '/@/api/admin1';

const TagsApi = tagsApi();
const LivesApi = livesApi()
export default {
	name: 'bannerAddDialog',
	components: {},
	setup() {
		const state = reactive({
			title: '添加轮播图',
			open: false,
			form: {} as any,
			rules: {
				name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
				good_id: [{ required: true, message: '关联商品不能为空', trigger: ['blur', 'change'] }],
				label_id: [{ required: true, message: '关联标签不能为空', trigger: ['blur', 'change'] }],
				live_id: [{ required: true, message: '关联直播不能为空', trigger: ['blur', 'change'] }],
				thumb: [{ required: true, message: '轮播图不能为空', trigger: ['blur', 'change'] }],
			}, // 表单校验
			submitLoading: false,
			goodIdSelect: {
				loading: false,
				options: [] as any,
			},
			labelIdOptions: [] as any,
			liveIdOptions: [] as any,
		});

		let callback: Function = () => {};
		const formRef = ref(null);
		const imageUploadThumbRef = ref(null);

		/********** 点击事件(on开头) **********/
		// 商品获取焦点
		const onGoodIdFocus = () => {
			if (!state.form.good_id) {
				state.goodIdSelect.loading = true;
				_goodsList({
					pageNum: 1,
					pageSize: 10,
					state: 1,
				});
			}
		};
		/** 提交按钮 */
		const onSubmitForm = () => {
			(formRef.value as any)?.validate((valid: boolean) => {
				if (valid) {
					state.submitLoading = true;
					const goodIdData = state.goodIdSelect.options.find((item: any) => item.id === state.form.good_id);
					const labelIdData = state.labelIdOptions.find((item: any) => item.id === state.form.label_id);
					const liveIdData = state.liveIdOptions.find((item: any) => item.id === state.form.live_id);
					let link_content = state.form.link_content;
					if (state.form.link_type === 2) {
						link_content = JSON.stringify({
							url: `/pagesCommon/goodDetails/index?goods_id=${goodIdData.id}`,
							id: goodIdData.id,
							title: goodIdData.title,
						});
					} else if (state.form.link_type === 3) {
						link_content = JSON.stringify({
							url: `/pagesCommon/zonePage/index?id=${labelIdData.id}&title=${labelIdData.name}&type=tags`,
							id: labelIdData.id,
							name: labelIdData.name,
						});
					} else if (state.form.link_type === 4) {
						link_content = JSON.stringify({
							url: `/pagesTool/liveDetail/index?id=${liveIdData.id}&roomId=${liveIdData.roomId}`,
							id: liveIdData.id,
							roomId: liveIdData.roomId,
						});
					}
					_bannerAdd({
						...state.form,
						thumb: state.form.thumb.replace(import.meta.env.VITE_FILE_API, ''),
						link_content: link_content,
					});
				}
			});
		};
		// 取消按钮
		const onCancel = () => {
			state.submitLoading = false;
			state.open = false;
			reset();
		};

		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any, fn: Function) => {
			console.log(config);
			callback = fn;
			state.open = true;
			reset();
			_tagsList({ pageNum: 1, pageSize: 100, status:1 });
			_livesList({ pageNum: 1, pageSize: 100 });
			nextTick(() => {
				(imageUploadThumbRef.value as any)?.dataLoading();
			});
		};
		// 表单重置
		const reset = () => {
			state.form = {
				title: '',
				display_order: '',
				good_id: '',
				label_id: '',
				live_id:'',
				link_type: 0,
				status: 1,
				link_content: '',
				thumb: '',
				app_show: '1',
				xcx_show: '1',
				h5_show: '1',
				pc_show: '1',
			};
			(formRef.value as any)?.resetFields();
			nextTick(() => {
				(imageUploadThumbRef.value as any)?.reset();
			});
		};
		// 选择商品查询
		const goodIdRemoteMethod = (query: any) => {
			if (query) {
				state.goodIdSelect.loading = true;
				_goodsList({ pageNum: 1, pageSize: 10, state: 1, title: query });
			}
		};

		/**************************网络请求************************/
		// 商品标签列表
		const _tagsList = (params: any) => {
			TagsApi.tagsList(params).then((res: any) => {
				state.labelIdOptions = res.data.list;
			});
		};
		const _bannerAdd = (params: object) => {
			bannerAdd(params)
				.then(() => {
					state.submitLoading = false;
					ElMessage.success('操作成功');
					onCancel();
					callback();
				})
				.catch(() => (state.submitLoading = false));
		};
		// 商品列表
		const _goodsList = (_data: object) => {
			goodsList(_data)
				.then((res: any) => {
					state.goodIdSelect.options = res.data.list;
					state.goodIdSelect.loading = false;
				})
				.catch(() => {
					state.goodIdSelect.loading = false;
				});
		};
		// 直播间列表
		const _livesList = (params: object = {}) => {
			LivesApi.livesList(params)
				.then((res: any) => {
					state.liveIdOptions = res.data.list;
				})
		};

		return {
			formRef,
			imageUploadThumbRef,
			onSubmitForm,
			openDialog,
			onCancel,
			onGoodIdFocus,
			goodIdRemoteMethod,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
